<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改密码</title>
    <style>
        body {
            opacity: 0.6; /* 设置透明度为50% */
            background-image: url("img/preview2.jpg");
            text-align: center;
            margin-top: 100px;
            font-family: Arial, sans-serif;
        }

        form {
            display: inline-block;
            text-align: left;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 300px;
            background-color: rgba(232, 245, 233, 0.65);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 0 auto; /* 设置左右外边距为auto，实现水平居中 */
        }

        input {
            margin: 5px;
            padding: 5px;
            width: 200px;
        }


        input[type="submit"] {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            display: block;
            margin: 0 auto;

        }
    </style>

</head>
<body>
<div id="passwordErrorMessages"></div>

<form action="UserServlet?type=rePassword" method="post" onsubmit="return validateForm()">
    原密码：<input type="text" id="oldPassword" name="oldPassword" value="${oldPassword}" oninput="validateOldPassword(this)"><span id="oldPasswordError" style="color: red;"></span><br/>
    新密码：<input type="text" id="newPassword" name="newPassword" value="${newPassword}" oninput="validateNewPassword(this)"><span id="newPasswordError" style="color: red;"></span><br/>
    确认新密码：<input type="text" id="confirmNewPassword" name="confirmPassword" value="${confirmPassword}" oninput="validateConfirmNewPassword(this)"><span id="confirmNewPasswordError" style="color: red;"></span><br/>
    <input type="submit" value="确认修改">
</form>

<script>
    let hasErrors = false;

    function validateOldPassword(input) {
        const errorSpan = document.getElementById('oldPasswordError');
        if (input.value === '') {
            errorSpan.textContent = '原密码不能为空！';
            hasErrors = true;
        } else if (input.value !== document.getElementById('loginPassword').value) {
            errorSpan.textContent = '原密码不正确！';
            hasErrors = true;
        } else {
            errorSpan.textContent = '';
            hasErrors = false;
        }
    }



    function validateNewPassword(input) {
        const errorSpan = document.getElementById('newPasswordError');
        if (input.value === '') {
            errorSpan.textContent = '新密码不能为空！';
            hasErrors = true;
        } else if (input.value === document.getElementById('oldPassword').value) {
            errorSpan.textContent = '新密码不能与原密码相同！';
            hasErrors = true;
        } else {
            errorSpan.textContent = '';
            hasErrors = false;
            // 当新密码变化时，也需要检查确认新密码
            validateConfirmNewPassword(document.getElementById('confirmNewPassword'));
        }
    }

    function validateConfirmNewPassword(input) {
        const errorSpan = document.getElementById('confirmNewPasswordError');
        if (input.value !== document.getElementById('newPassword').value) {
            errorSpan.textContent = '确认新密码与新密码不匹配！';
            hasErrors = true;
        } else {
            errorSpan.textContent = '';
            hasErrors = false;
        }
    }

    function validateForm() {
        if (hasErrors) {
            alert('请输入正确的密码！');
            return false; // Prevent form submission if there are errors
        }
        return true;
    }
</script>

</body>
</html>

